<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/Template/frame.xhtml">
	<ui:define name="page">

		<h:form id="map" prependId="false">
			<h:panelGrid columns="4" style="position: relative;margin:0 auto;">
				<h:outputLabel value="Начальные координаты:"
					style="font-weight:bold" />
				<p:inputText value="#{mapBean.coordFrom}" size="20" />

				<h:outputLabel id="from" value="Начальный адрес:"
					style="font-weight:bold" />
				<p:inputText value="#{mapBean.addressFrom}" size="40" />

				<h:outputLabel value="Конечные координаты:" style="font-weight:bold" />
				<p:inputText value="#{mapBean.coordTo}" size="20" />

				<h:outputLabel id="to" value="Конечный адрес:"
					style="font-weight:bold" />
				<p:inputText value="#{mapBean.addressTo}" size="40" />
				<p:commandButton value="Проложить маршрут"
					action="#{mapBean.drawRoutByData}" update="map" />
			</h:panelGrid>
			<br />
			<br />
			<p:commandButton value="Установить старт - финиш"
				action="#{mapBean.startFinish}"
				disabled="#{mapBean.startFinishMode}" update="map" />
			<p:commandButton value="Установить дополнительную точку"
				action="#{mapBean.wayPoints}" disabled="#{mapBean.newMarkerMode}"
				update="map" />


			<p:dataTable var="shit" value="#{mapBean.shitTable}"
				style="position: absolute;left:50;width:150px;height:auto">
				<p:column headerText="Summ of shit">
					<h:outputText value="#{shit}" />
				</p:column>

			</p:dataTable>


			<p:gmap center="#{mapBean.center}" zoom="#{mapBean.zoom}"
				onPointClick="handlePointClick(event);" widgetVar="map"
				type="ROADMAP" model="#{mapBean.mapModel}"
				style="position: relative;margin:0 auto;width:900px;height:500px">
				<p:ajax event="markerDrag" listener="#{mapBean.onMarkerDrag}"
					update="map" />
			</p:gmap>

			<p:dataTable var="step" value="#{mapBean.stepList}">
				<p:column headerText="Instructions">
					<h:outputText value="#{step.html_instructions}" escape="false" />
				</p:column>
			</p:dataTable>

			<p:dialog>
				<p:commandButton id="add" actionListener="#{mapBean.addMarker}"
					update="map" />
				<h:inputHidden id="lat" value="#{mapBean.lat}" />
				<h:inputHidden id="lng" value="#{mapBean.lng}" />
			</p:dialog>

			<p:growl id="messages" showDetail="true" sticky="true" />

			<p:selectOneRadio id="options" value="#{mapBean.mode}" update="map">
				<f:selectItem itemLabel="walking" itemValue="walking" />
				<f:selectItem itemLabel="bicycling" itemValue="bicycling" />
				<f:selectItem itemLabel="driving" itemValue="driving" />
			</p:selectOneRadio>


		</h:form>


		<script type="text/javascript">
			function handlePointClick(event) {
				document.getElementById('lat').value = event.latLng.lat();
				document.getElementById('lng').value = event.latLng.lng();
				document.getElementById('add').click();
			}
		</script>
	
    
	
	

	Distance = <h:outputText value="#{mapBean.distance}" />
	Duration = <h:outputText value="#{mapBean.duration}" />

	</ui:define>
</ui:composition>
</html>